<template>
  <div >
    <div class="head">
      <div class="personDesc">
        <div class="a_headImg">
          <img :src="userIcon">
        </div>
        <div class="personDetail">
          <p>{{userInfo.nickName}}</p>
          <p>{{userInfo.mobile}}</p>
          <p style="background-color: #241adc;border-radius: 1rem;width: 5.5rem;">&nbsp;&nbsp;果币：{{gb.total}}</p>
        </div>
        <div>
          <button @click="signMe" class="signBtn">签到</button>
        </div>

      </div>
    </div>
    <div class="wave">
      <img src="../../images/cr-0119.png"/>
    </div>
    <div class="dbjl" @click="dbRecordsGo">
      <div class="dbLeft">
        <img style="float: left;" src="../../images/cr-020.png">
        <p style="float: left;padding-left: 1rem;">夺宝记录 </p>
      </div>
      <div class="dbRight">

        <p v-show="dbExist" style="color: red">3笔记录进行中 ></p>
      </div>
    </div>
    <div class="dbjl" @click="newsGo">
      <div class="dbLeft">
        <img style="float: left;" src="../../images/cr-021.png">
        <p style="float: left;padding-left: 1rem;">我的评论 </p>
      </div>
      <div class="dbRight">
        <p v-show="msgExist" style="color: red">新消息 ></p>
      </div>
    </div>
    <div class="signOut">
      <button @click="logout">退出登录</button>
    </div>
  </div>
</template>

<script src="../common/js/fetch.js"></script>
<script>
  import {getStore, setStore} from 'src/config/mUtils'
  import {userIndex,userSign} from '../../service/getData'
  export default {
    name: 'account',
    data () {
      return {
        newsUrl: null,
        accountData: {},
        userInfo: {},
        gb: {},
        userIcon: null,
        dbExist: false,
        msgExist: false,
        myyydbUrl: null,
        deviceId : null
      }
    },
    mounted(){
        var uuid = localStorage.getItem("_uuid");
        if(uuid == null || uuid == ''){
            this.$router.push("/login");
        }else{
          var localDate = Date.parse(new Date());
          var deviceId =  getStore("_bbid");
          var _self = this;
          /*var url = "http://10.99.8.51:8080/flowcenter-activity/v9/private/" +
            getStore("_bbid")+"/user/index?lastTime="+localDate;*/
          /*var url = "http://hd.zt.raiyi.com/v9/private/" +
            getStore("_bbid")+"/user/index?lastTime="+localDate;*/
          userIndex(deviceId,localDate).then(json=>{
            console.log(json);
            _self.accountData = json.data;
            _self.myyydbUrl = _self.accountData.myyydbUrl;
            _self.userInfo = _self.accountData.userInfo;
            _self.gb = _self.accountData.gb;
            //_self.newsUrl = "http://10.99.8.51:8080/flowcenter-activity/v9/private/"+_self.deviceId+"/weibo/comment/msgList?showStartTime=111&shwoEndTime=222&pageIndex=0&pageSize=10";
            _self.newsUrl = "http://hd.zt.raiyi.com/v9/private/"+_self.deviceId+"/weibo/comment/msgList?showStartTime=111&shwoEndTime=222&pageIndex=0&pageSize=10";
            var iconR = _self.userInfo.icon;
            var dbordering = parseInt(_self.accountData.dbordering);
            if(dbordering > 0) {
              _self.dbExist = true;
            }
            if(_self.accountData.weibo === 1){
              _self.msgExist = true;
            }
            if(iconR == null || iconR === 'undefined'){
              _self.userIcon = '../common/images/cr-022.png';
            }else{
              _self.userIcon = iconR;
              setStore('userIcon',iconR);
            }
          });
          /*fetch(url).then(function (response) {
            return response.json();
          }).then(function (json) {

          });*/
        }

    },
    created() {
      this.init();
    },
    computed: {
      length () {
        return this.items.length
      }
    },
    methods:{
      init() {
        this.deviceId = getStore("_bbid");
        //alert(this.deviceId);
      },
      dbRecordsGo(){
          location.href=this.myyydbUrl;
      },
      newsGo(){
          location.href=this.newsUrl;
      },
      signMe(){
          //var url = "http://10.99.8.51:8080/flowcenter-activity/v9/private/"+this.deviceId+"/sign/doSign?appCode=other_browser";
          //var url = "http://hd.zt.raiyi.com/v9/private/"+this.deviceId+"/sign/doSign?appCode=other_browser"
          userSign(this.deviceId,'other_browser').then(json=>{
            console.log(json);
            location.reload();
          });
        /*fetch()
            .then(function (response) {
              return response.json();
            }).then(function (json) {
                console.log(json);
                location.reload();
          });*/
      },
      logout(){
          localStorage.removeItem("_uuid");
          localStorage.removeItem("userIcon");
          this.$router.push("/login");
      }
    }
  }
</script>

<!-- Add "scoped" attribute to limit CSS to this component only -->
<!--<style scoped>
  @import '../common/css/reset.css';
  @import '../common/css/account.css';
</style>-->
<style scoped>
h1, h2 {
  font-weight: normal;
}

ul {
  list-style-type: none;
  padding: 0;
}

li {
  display: inline-block;
  margin: 0 10px;
}

a {
  color: #42b983;
}
.head {
  width: 100%;
  height: 11rem;
  background-color: dodgerblue;
}
.msg{
  height: 4rem;

}
.msg img{
  width: 1.5rem;
  float: right;
  padding: 2rem 2rem 0 0 ;
}

.personDesc {
  width: 100%;
  padding-top: 2.5rem;
}

.a_headImg {
  margin-left: 2rem;
  width: 15%;
  float: left;
}
.a_headImg img{
  width: 100%;
}
.personDetail {
  float: left;
  margin-left: 2rem;
  width: 50%;
  text-align: left;
}
.personDetail p{
  color: #ffffff;
  line-height: 1.5rem;
}

.dbjl {
  margin-top: 1rem;
  width: 100%;
  height: 4rem;
  background-color: #ffffff;
}

.dbLeft {
  float: left;
  height: 1.5rem;
  margin-top: 1rem;
  margin-left: 1rem;
}
.dbLeft img {
  height: 100%;
}

.dbRight {
  float: right;
  margin: 1rem 1rem 0 0;
}

.signOut {

  text-align: center;
  width: 100%;
  margin-top: 2rem;
}
.signOut button{
  width: 80%;
  height: 3rem;
  background-color: #40AFFE;
  border: none;
  border-radius: 0.2rem;
  color: #ffffff;
  font-size: 1.5rem;
}

.wave {
  margin-top: -2rem;
}
.wave img {
  width: 100%;
;

}
.signBtn {
  width: 3rem;
  height: 2rem;
  background-color: #ffffff;
  border: 1px solid ;
  font-size: 1rem;
}
</style>
